import type { ProFormInstance } from '@/components/Pro/';
import { ProForm, ProFormDigit, ProFormSelect } from '@/components/Pro/';
import { stationControllerSaveServeConfig as edit } from '@/services/ess/station';
import { Flex, message, Space } from 'antd';
import React, { useEffect, useRef } from 'react';
import { useIntl } from 'umi';

const ServiceForm: React.FC<{
  detailInfo: API.StationInfo;
  disableEdit?: boolean;
}> = ({ detailInfo, disableEdit }) => {
  const formRef = useRef<ProFormInstance>();
  const intl = useIntl();

  useEffect(() => {
    formRef?.current?.setFieldsValue(detailInfo);
  }, [detailInfo]);

  const WIDTH = 450;
  const OPTION_WIDTH = 100;
  const LABEL_WIDTH = 120;
  const GAP = 10;
  return (
    <ProForm
      layout="horizontal"
      labelCol={{
        flex: `${LABEL_WIDTH}px`,
      }}
      formRef={formRef}
      submitter={{
        render: (props, doms) =>
          !disableEdit && (
            <div style={{ paddingLeft: LABEL_WIDTH }}>
              <Space>{doms}</Space>
            </div>
          ),
      }}
      onFinish={async (value) => {
        await edit({ ...detailInfo, ...value } as API.StationBaseReq);
        message.success(
          intl.formatMessage({
            id: 'global.modifiedSuccess',
          }),
        );
      }}
      style={{ marginTop: 15 }}
      disabled={disableEdit}
    >
      <div style={{ width: WIDTH }}>
        <Flex gap={GAP}>
          <div style={{ width: WIDTH - OPTION_WIDTH - GAP }}>
            <ProFormDigit
              name="storage"
              label={intl.formatMessage({
                id: 'systemManagement.siteAdministrationMenu.storageSpace',
              })}
            />
          </div>
          <ProFormSelect
            width={OPTION_WIDTH}
            options={[
              {
                value: 'GB',
                label: 'GB',
              },
              {
                value: 'TB',
                label: 'TB',
              },
            ]}
            name="torageUnit"
          />
        </Flex>
        <Flex gap={GAP}>
          <div style={{ width: WIDTH - OPTION_WIDTH - GAP }}>
            <ProFormDigit
              name="duration"
              label={intl.formatMessage({
                id: 'systemManagement.siteAdministrationMenu.storageDuration',
              })}
            />
          </div>
          <ProFormSelect
            width={OPTION_WIDTH}
            options={[
              {
                value: 'DAY',
                label: intl.formatMessage({ id: 'systemManagement.supplementary.day' }),
              },
              {
                value: 'MONTH',
                label: intl.formatMessage({ id: 'systemManagement.supplementary.month' }),
              },
              {
                value: 'YEAR',
                label: '年',
              },
            ]}
            name="durationUnit"
          />
        </Flex>
        <Flex gap={GAP}>
          <div style={{ width: WIDTH - OPTION_WIDTH - GAP }}>
            <ProFormDigit
              name="maxQuery"
              label={intl.formatMessage({
                id: 'systemManagement.siteAdministrationMenu.maximumQuery',
              })}
            />
          </div>
          <ProFormSelect
            width={OPTION_WIDTH}
            options={[
              {
                value: 'DAY',
                label: intl.formatMessage({ id: 'systemManagement.supplementary.day' }),
              },
              {
                value: 'MONTH',
                label: intl.formatMessage({ id: 'systemManagement.supplementary.month' }),
              },
              {
                value: 'YEAR',
                label: '年',
              },
            ]}
            name="maxQueryUnit"
          />
        </Flex>
        <Flex gap={GAP}>
          <div style={{ width: WIDTH - OPTION_WIDTH - GAP }}>
            <ProFormDigit
              name="maxExport"
              label={intl.formatMessage({
                id: 'systemManagement.siteAdministrationMenu.dataExport',
              })}
            />
          </div>
          <ProFormSelect
            width={OPTION_WIDTH}
            options={[
              {
                value: 'HUNDRED',
                label: intl.formatMessage({ id: 'systemManagement.supplementary.items100' }),
              },
              {
                value: 'THOUSAND',
                label: intl.formatMessage({ id: 'systemManagement.supplementary.items1000' }),
              },
              {
                value: 'TEN_THOUSAND',
                label: intl.formatMessage({ id: 'systemManagement.supplementary.items10000' }),
              },
            ]}
            name="maxExportUnit"
          />
        </Flex>
      </div>
    </ProForm>
  );
};
export default ServiceForm;
